<!DOCTYPE html>
<html
  lang="zh"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
  <head>
    <th:block th:include="include :: header('修改主题党日')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: summernote-css" />
  </head>
  <body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
      <div class="row">
        <div class="col-sm-12">
          <div class="ibox float-e-margins">
            <div class="ibox-title">
              <h5>修改主题党日</h5>
            </div>
            <div class="ibox-content">
              <form
                class="form-horizontal m"
                id="form-theme-party-day-edit"
                th:object="${djThemePartyDay}"
                enctype="multipart/form-data"
              >
                <input name="id" th:field="*{id}" type="hidden" />
                <div class="form-group">
                  <label class="col-sm-3 control-label">活动主题：</label>
                  <div class="col-sm-8">
                    <input
                      name="title"
                      th:field="*{title}"
                      class="form-control"
                      type="text"
                      required
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-3 control-label">活动日期：</label>
                  <div class="col-sm-8">
                    <div class="input-group date">
                      <input
                        name="activityDate"
                        th:field="*{activityDate}"
                        class="form-control"
                        type="text"
                        id="activityDate"
                        readonly
                        required
                      />
                      <span class="input-group-addon"
                        ><i class="fa fa-calendar"></i
                      ></span>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-3 control-label">活动时间：</label>
                  <div class="col-sm-8">
                    <div class="input-group time">
                      <input
                        name="activityTime"
                        th:field="*{activityTime}"
                        class="form-control"
                        type="text"
                        id="activityTime"
                        readonly
                      />
                      <span class="input-group-addon"
                        ><i class="fa fa-clock-o"></i
                      ></span>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-3 control-label">活动地点：</label>
                  <div class="col-sm-8">
                    <input
                      name="location"
                      th:field="*{location}"
                      class="form-control"
                      type="text"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-3 control-label">活动内容：</label>
                  <div class="col-sm-8">
                    <textarea
                      name="content"
                      id="content"
                      th:field="*{content}"
                      class="form-control"
                    ></textarea>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-3 control-label">参与人员：</label>
                  <div class="col-sm-8">
                    <input
                      name="participants"
                      id="participants"
                      th:field="*{participants}"
                      class="form-control"
                      type="hidden"
                    />
                    <div class="input-group">
                      <input
                        class="form-control"
                        type="text"
                        id="participantNames"
                        th:value="*{participantNames}"
                        readonly
                        placeholder="请选择参与人员"
                      />
                      <div class="input-group-btn">
                        <button
                          type="button"
                          class="btn btn-primary"
                          onclick="selectParticipants()"
                        >
                          选择人员
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-3 control-label">组织者：</label>
                  <div class="col-sm-8">
                    <input
                      name="organizer"
                      th:field="*{organizer}"
                      class="form-control"
                      type="text"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-3 control-label">联系电话：</label>
                  <div class="col-sm-8">
                    <input
                      name="contactPhone"
                      th:field="*{contactPhone}"
                      class="form-control"
                      type="text"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-3 control-label">通知方式：</label>
                  <div class="col-sm-8">
                    <label class="radio-box">
                      <input
                        type="radio"
                        name="noticeMethods"
                        value="短信"
                        th:checked="*{noticeMethods == '短信'}"
                      />
                      活动前发送短信提醒
                    </label>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-3 control-label">活动资料上传：</label>
                  <div class="col-sm-8">
                    <input name="videoFile" class="form-control" type="file" />
                    <span class="help-block m-b-none"
                      ><i class="fa fa-info-circle"></i>
                      上传活动相关资料，包括讲话稿、学习材料、照片等</span
                    >
                    <div th:if="*{videoPath != null and videoPath != ''}">
                      已上传文件:
                      <a th:href="@{*{videoPath}}" target="_blank">查看文件</a>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-3 control-label">状态：</label>
                  <div class="col-sm-8">
                    <select
                      name="status"
                      th:field="*{status}"
                      class="form-control"
                    >
                      <option value="0">未开始</option>
                      <option value="1">进行中</option>
                      <option value="2">已结束</option>
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-3 control-label">备注：</label>
                  <div class="col-sm-8">
                    <textarea
                      name="remark"
                      th:field="*{remark}"
                      class="form-control"
                      rows="3"
                    ></textarea>
                  </div>
                </div>
                <div class="form-group">
                  <div class="form-control-static col-sm-offset-9">
                    <button type="submit" class="btn btn-primary">提交</button>
                    <button
                      type="button"
                      class="btn btn-danger"
                      onclick="closeItem()"
                    >
                      关闭
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: summernote-js" />

    <script type="text/javascript">
      var prefix = ctx + "dj/theme/party/day";

      $(function () {
        // 初始化日期选择器
        $("#activityDate").datetimepicker({
          format: "yyyy-mm-dd",
          minView: "month",
          autoclose: true,
          todayBtn: true,
          language: "zh-CN",
        });

        // 初始化时间选择器
        $("#activityTime").datetimepicker({
          format: "hh:ii",
          startView: "day",
          minView: "hour",
          autoclose: true,
          minuteStep: 5,
          language: "zh-CN",
        });
      });

      // 初始化富文本编辑器
      $("#content").summernote({
        height: 200,
        lang: "zh-CN",
        toolbar: [
          ["style", ["style"]],
          ["font", ["bold", "underline", "clear"]],
          ["fontname", ["fontname"]],
          ["color", ["color"]],
          ["para", ["ul", "ol", "paragraph"]],
          ["table", ["table"]],
          ["insert", ["link", "picture"]],
          ["view", ["fullscreen", "codeview", "help"]],
        ],
      });

      $("#form-theme-party-day-edit").validate({
        rules: {
          title: {
            required: true,
            maxlength: 255,
          },
          activityDate: {
            required: true,
          },
        },
        messages: {
          title: {
            required: "请输入活动主题",
            maxlength: "活动主题不能超过255个字符",
          },
          activityDate: {
            required: "请选择活动日期",
          },
        },
        submitHandler: function (form) {
          // 创建FormData对象
          var formData = new FormData(form);

          // 提交表单
          $.ajax({
            url: prefix + "/edit",
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            beforeSend: function () {
              $.modal.loading("正在处理中，请稍候...");
              $.modal.disable();
            },
            success: function (result) {
              // 使用框架标准的成功回调处理
              $.operate.successCallback(result);
            },
            error: function () {
              $.modal.closeLoading();
              $.modal.enable();
              $.modal.msgError("系统错误，请重试");
            },
          });
        },
      });

      // 全局submitHandler函数，用于iframe弹窗调用
      function submitHandler() {
        if ($.validate.form()) {
          $("#form-theme-party-day-edit").submit();
        }
      }

      // 选择参与人员
      function selectParticipants() {
        // 这里应该打开一个党员选择窗口，这里简化处理
        layer.open({
          type: 2,
          title: "选择参与人员",
          area: ["800px", "500px"],
          content: ctx + "system/partymember/member/select",
          btn: ["确定", "关闭"],
          yes: function (index, layero) {
            var iframeWin = layero.find("iframe")[0];
            var data = iframeWin.contentWindow.getSelected();
            if (data) {
              var ids = [];
              var names = [];
              for (var i = 0; i < data.length; i++) {
                ids.push(data[i].id);
                names.push(data[i].name);
              }
              $("#participants").val(ids.join(","));
              $("#participantNames").val(names.join(","));
            }
            layer.close(index);
          },
        });
      }

      function closeItem() {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
      }
    </script>
  </body>
</html>
